<template>
  <el-menu
    class="sidebar-menu"
    :default-active="activeIndex"
    :router="true"
    :collapse="isCollapse"
  >
    <div class="logo-container">
      <h3 v-if="!isCollapse">智慧零工平台</h3>
      <h3 v-else>智</h3>
    </div>
    
    <!-- 企业用户菜单 -->
    <template v-if="userType === 'company'">
      <el-menu-item index="/tasks">
        <el-icon><Document /></el-icon>
        <span>我的任务</span>
      </el-menu-item>
      
      <el-menu-item index="/task/create">
        <el-icon><Plus /></el-icon>
        <span>发布任务</span>
      </el-menu-item>
      
      <el-menu-item index="/messages">
        <el-icon><ChatDotSquare /></el-icon>
        <span>我的消息</span>
        <el-badge v-if="unreadMessageCount > 0" :value="unreadMessageCount" class="message-count" />
      </el-menu-item>
      
      <el-menu-item index="/company-info">
        <el-icon><OfficeBuilding /></el-icon>
        <span>企业信息</span>
      </el-menu-item>
      
      <el-menu-item index="/analytics">
        <el-icon><TrendCharts /></el-icon>
        <span>数据分析</span>
      </el-menu-item>
      
      <el-menu-item index="/wallet">
        <el-icon><Money /></el-icon>
        <span>代币充值及提现</span>
      </el-menu-item>
      
      <el-menu-item index="/support">
        <el-icon><Service /></el-icon>
        <span>求助客服</span>
      </el-menu-item>
    </template>
    
    <!-- 零工用户菜单 -->
    <template v-else-if="userType === 'worker'">
      <el-menu-item index="/tasks">
        <el-icon><Document /></el-icon>
        <span>我的任务</span>
      </el-menu-item>
      
      <el-menu-item index="/job-filter">
        <el-icon><Filter /></el-icon>
        <span>工作筛选</span>
      </el-menu-item>
      
      <el-menu-item index="/messages">
        <el-icon><ChatDotSquare /></el-icon>
        <span>我的消息</span>
        <el-badge v-if="unreadMessageCount > 0" :value="unreadMessageCount" class="message-count" />
      </el-menu-item>
      
      <el-menu-item index="/profile">
        <el-icon><User /></el-icon>
        <span>个人信息</span>
      </el-menu-item>
      
      <el-menu-item index="/analytics">
        <el-icon><TrendCharts /></el-icon>
        <span>数据分析</span>
      </el-menu-item>
      
      <el-menu-item index="/wallet">
        <el-icon><Money /></el-icon>
        <span>代币充值及提现</span>
      </el-menu-item>
      
      <el-menu-item index="/support">
        <el-icon><Service /></el-icon>
        <span>求助客服</span>
      </el-menu-item>
    </template>
    
    <!-- 管理员用户菜单 -->
    <template v-else-if="userType === 'admin'">
      <el-menu-item index="/admin/dashboard">
        <el-icon><DataBoard /></el-icon>
        <span>管理控制台</span>
      </el-menu-item>
      
      <el-menu-item index="/admin/users">
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      
      <el-menu-item index="/admin/tasks">
        <el-icon><Document /></el-icon>
        <span>任务管理</span>
      </el-menu-item>
      
      <el-menu-item index="/admin/analytics">
        <el-icon><TrendCharts /></el-icon>
        <span>数据分析管理</span>
      </el-menu-item>
    </template>
    
    <!-- 客服用户菜单 -->
    <template v-else-if="userType === 'customer'">
      <el-menu-item index="/customer/dashboard">
        <el-icon><DataBoard /></el-icon>
        <span>客服控制台</span>
      </el-menu-item>
      
      <!-- 新增支持请求菜单 -->
      <el-menu-item index="/customer/support-requests">
        <el-icon><Service /></el-icon>
        <span>支持请求</span>
      </el-menu-item>
      
      <el-menu-item index="/customer/messages">
        <el-icon><ChatDotSquare /></el-icon>
        <span>常见问题管理</span>
        <el-badge v-if="unreadMessageCount > 0" :value="unreadMessageCount" class="message-count" />
      </el-menu-item>
    </template>
    
    <!-- <el-menu-item index="/logout" class="logout-item">
      <el-icon><SwitchButton /></el-icon>
      <span>退出登录</span>
    </el-menu-item> -->
  </el-menu>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { 
  Document, 
  Plus, 
  OfficeBuilding, 
  TrendCharts, 
  Money, 
  Service, 
  Filter, 
  User, 
  SwitchButton,
  ChatDotSquare,
  DataBoard
} from '@element-plus/icons-vue'

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()
const activeIndex = computed(() => route.path)
const userType = ref(localStorage.getItem('userType') || 'worker')
const unreadMessageCount = ref(0)

// WebSocket连接
let ws = null
const userId = localStorage.getItem('userId')

const connectWebSocket = () => {
  if (!userId) return
  
  const wsUrl = `ws://${window.location.host}/api/ws/messages/${userId}`
  ws = new WebSocket(wsUrl)
  
  ws.onopen = () => {
    console.log('WebSocket连接已建立')
  }
  
  ws.onmessage = (event) => {
    try {
      const data = JSON.parse(event.data)
      if (data.type === 'unread_count') {
        unreadMessageCount.value = data.count
      } else if (data.type === 'new_message') {
        // 收到新消息，更新未读消息计数
        unreadMessageCount.value += 1
      }
    } catch (e) {
      console.error('处理WebSocket消息时出错:', e)
    }
  }
  
  ws.onclose = () => {
    console.log('WebSocket连接已关闭')
    // 尝试重新连接
    setTimeout(connectWebSocket, 3000)
  }
  
  ws.onerror = (error) => {
    console.error('WebSocket错误:', error)
  }
}

// 初始化WebSocket连接
onMounted(() => {
  connectWebSocket()
})

// 组件卸载时关闭WebSocket连接
onUnmounted(() => {
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.close()
  }
})
</script>

<style scoped>
.sidebar-menu {
  height: 100vh;
  border-right: none;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  transition: all 0.3s ease;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 220px;
}

.logo-container {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.logo-container h3 {
  margin: 0;
  color: #3a3a3a;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(to right, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 菜单项样式 */
.sidebar-menu :deep(.el-menu-item) {
  margin: 4px 10px;
  border-radius: 8px;
  height: 44px;
  line-height: 44px;
  transition: all 0.3s;
  color: #5a5a5a;
}

.sidebar-menu :deep(.el-menu-item):hover {
  background: rgba(255, 255, 255, 0.7) !important;
  transform: translateX(3px);
}

.sidebar-menu :deep(.el-menu-item.is-active) {
  background: linear-gradient(to right, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1)) !important;
  color: #6a11cb;
  font-weight: 500;
  border-left: 3px solid #6a11cb;
}

/* 图标样式 */
.sidebar-menu :deep(.el-icon) {
  color: #6a5acd;
  font-size: 18px;
}

.sidebar-menu :deep(.el-menu-item.is-active .el-icon) {
  color: #6a11cb;
}

/* 消息计数徽章 */
.message-count {
  margin-left: 8px;
}

.message-count :deep(.el-badge__content) {
  background: linear-gradient(to right, #ff8a00, #e52e71);
  border: none;
  right: -15px;
}

/* 折叠状态下的样式 */
.sidebar-menu.el-menu--collapse {
  width: 64px;
}

.sidebar-menu.el-menu--collapse .logo-container h3 {
  font-size: 24px;
  background: linear-gradient(to right, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 退出登录按钮 */
.logout-item {
  position: absolute;
  bottom: 20px;
  width: calc(100% - 20px);
  margin: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.logout-item:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .sidebar-menu:not(.el-menu--collapse) {
    width: 200px;
  }
  
  .logo-container h3 {
    font-size: 16px;
  }
}
</style>